var data2 = [
  {
    Id2: 1,
    // img:'<img src="../img/content/content_table_person.png">',
    name2: "张三",
    sex2: "男",
    Employee_number2: "A01",
    Before_department2: "研发部",
    After_department2: "产品部",
    Type2: "调岗",
    Date_of_entry2: "2021-01-02",
    Date_of_application2: "2022-01-02",
    Approval_status2: "未发起",
  },
  {
    Id2: 2,
    name2: "小明",
    sex2: "男",
    Employee_number2: "A02",
    Before_department2: "研发部",
    After_department2: "产品部",
    Type2: "调岗",
    Date_of_entry2: "2021-01-02",
    Date_of_application2: "2022-01-02",
    Approval_status2: "未发起",
  },  {
    Id2: 3,
    name2: "小蓝",
    sex2: "女",
    Employee_number2: "B02",
    Before_department2: "研发部",
    After_department2: "产品部",
    Type2: "调岗",
    Date_of_entry2: "2021-01-02",
    Date_of_application2: "2022-01-02",
    Approval_status2: "未发起",
  },  {
    Id2: 4,
    name2: "小黄",
    sex2: "男",
    Employee_number2: "B02",
    Before_department2: "研发部",
    After_department2: "产品部",
    Type2: "调岗",
    Date_of_entry2: "2021-01-02",
    Date_of_application2: "2022-01-02",
    Approval_status2: "未发起",
  },  {
    Id2: 5,
    name2: "小红",
    sex2: "女",
    Employee_number2: "C02",
    Before_department2: "研发部",
    After_department2: "产品部",
    Type2: "调岗",
    Date_of_entry2: "2021-01-02",
    Date_of_application2: "2022-01-02",
    Approval_status2: "未发起",
  },  {
    Id2: 6,
    name2: "小唐",
    sex2: "男",
    Employee_number2: "C02",
    Before_department2: "研发部",
    After_department2: "产品部",
    Type2: "调岗",
    Date_of_entry2: "2021-01-02",
    Date_of_application2: "2022-01-02",
    Approval_status2: "未发起",
  },  {
    Id2: 7,
    name2: "小徐",
    sex2: "女",
    Employee_number2: "D02",
    Before_department2: "研发部",
    After_department2: "产品部",
    Type2: "调岗",
    Date_of_entry2: "2021-01-02",
    Date_of_application2: "2022-01-02",
    Approval_status2: "未发起",
  },  {
    Id2: 8,
    name2: "小余",
    sex2: "男",
    Employee_number2: "D02",
    Before_department2: "研发部",
    After_department2: "产品部",
    Type2: "调岗",
    Date_of_entry2: "2021-01-02",
    Date_of_application2: "2022-01-02",
    Approval_status2: "未发起",
  },  {
    Id2: 9,
    name2: "小曾",
    sex2: "女",
    Employee_number2: "E02",
    Before_department2: "研发部",
    After_department2: "产品部",
    Type2: "调岗",
    Date_of_entry2: "2021-01-02",
    Date_of_application2: "2022-01-02",
    Approval_status2: "未发起",
  },  {
    Id2: 10,
    name2: "小刘",
    sex2: "女",
    Employee_number2: "E02",
    Before_department2: "研发部",
    After_department2: "产品部",
    Type2: "调岗",
    Date_of_entry2: "2021-01-02",
    Date_of_application2: "2022-01-02",
    Approval_status2: "未发起",
  },  {
    Id2: 11,
    name2: "小张",
    sex2: "男",
    Employee_number2: "F02",
    Before_department2: "研发部",
    After_department2: "产品部",
    Type2: "调岗",
    Date_of_entry2: "2021-01-02",
    Date_of_application2: "2022-01-02",
    Approval_status2: "未发起",
  },  {
    Id2: 12,
    name2: "小李",
    sex2: "女",
    Employee_number2: "F02",
    Before_department2: "研发部",
    After_department2: "产品部",
    Type2: "调岗",
    Date_of_entry2: "2021-01-02",
    Date_of_application2: "2022-01-02",
    Approval_status2: "未发起",
  },
];
//当前的页码
var page2 = 1;
//每页的条数
var count2 = 5;
//获取tbody
var oTBody2 = document.querySelector("#tbody2");
// console.log(oTBody2)
//获取分页容器
var oPagination2 = document.querySelector(".pagination2");
//获取搜索的输入框
var oSearchInp2 = document.querySelector(".searchInp");
// console.log(oSearchInp.value)

//获取搜索按钮
var oSearchBtn2 = document.querySelector(".searchBtn");
// 封装页面数据的渲染
function render2() {
  // 获取搜索框的文字
  var str2 = oSearchInp2.value;
  // 准备空数组存放数据
  var searchArrData2 = [];
  if (str2.trim() == "") {
    searchArrData2 = data2;
  } else {
    // 循环数据
    for (var i = 0; i < data2.length; i++) {
      // data的某一条数据包含str的值
      if (
        data2[i].name2.includes(str2) ||
        data2[i].Employee_number2.includes(str2) ||
        data2[i].Approval_status2 == str2
      ) {
        // 存入renderArrData空数据中
        searchArrData2.push(data2[i]);
      }
    }
  }
  // 先清空页面里的data数据
  oTBody2.innerHTML = "";
  // 页面初始化渲染数据
  //   console.log(data.slice((page - 1) * count, page * count));
  var renderArr2 = searchArrData2.slice((page2 - 1) * count2, page2 * count2);
  // 循环遍历,渲染数据
  for (var i = 0; i < renderArr2.length; i++) {
    var oTr2 = document.createElement("tr");
    oTr2.innerHTML = `
    <td>${renderArr2[i].Id2}</td>
    <td>
        <img src="../../images/tjy_img/content/content_table_person.png">
        <span  style="color:#134ade;">${renderArr2[i].name2}</span>
    </td>
    <td>${renderArr2[i].Employee_number2}</td>
    <td>${renderArr2[i].Before_department2}</td>
    <td>${renderArr2[i].After_department2}</td>
    <td>${renderArr2[i].Type2}</td>
    <td>${renderArr2[i].Date_of_entry2}</td>
    <td>${renderArr2[i].Date_of_application2}</td>
    <td>${renderArr2[i].Approval_status2}</td>
    <td>
        <button class="btn btn btn-info add2">修改</button>
        <button class="btn btn-warning backspace">删除</button>
    </td>
    `;
    oTBody2.appendChild(oTr2);
  }
  // 渲染页码
  var aPageBtn2 = document.querySelectorAll(".pageBtn2");

  for (var i = 0; i < aPageBtn2.length; i++) {
    oPagination2.removeChild(aPageBtn2[i].parentNode);
  }
  for (var i = 1; i <= Math.ceil(searchArrData2.length / count2); i++) {
    var oLi2 = document.createElement("li");
    oLi2.innerHTML = `<a class='pageBtn2' href="#">${i}</a>`;
    if (i == page2) {
      oLi2.classList.add("active");
    }
    oPagination2.insertBefore(oLi2, oPagination2.lastElementChild);
  }
}
// 页面一加载就渲染数据
render2();

// 给分页加事件
oPagination2.addEventListener("click", changePageFn2);
function changePageFn2() {
  if (event.target.className == "pageBtn2") {
    /*  var aPageBtn = document.querySelectorAll(".pageBtn2");
    for (var j = 0; j < aPageBtn.length; j++) {
      aPageBtn[j].parentNode.classList.remove("active");
    } */
    // event.target.parentNode.classList.add("active");
    page2 = event.target.innerText;
    // 渲染数据
    render2();
  }
}

//获取上一页的按钮
var oPrevBtn2 = document.querySelector(".prev2");
//获取下一页的按钮
var oNextBtn2 = document.querySelector(".next2");
// 上一页的事件
oPrevBtn2.addEventListener("click", prevFn2);
function prevFn2() {
  if (page2 > 1) {
    page2--;
    render2();
  }
}
// 下一页的事件
oNextBtn2.addEventListener("click", nextFn2);
function nextFn2() {
  if (page2 < Math.ceil(data2.length / count2)) {
    page2++;
    render2();
  }
}


// 删除某一条记录
oTBody2.addEventListener("click", delFn2);
function delFn2() {
  // 如果className包含del
  if (event.target.className.includes("backspace")) {
    // 获取当前点击的某一项的id
    var id = event.target.parentNode.parentNode.children[0].innerText;
    var oConfirm = confirm("您确定要删除吗？");
    for (var i = 0; i < data2.length; i++) {
      if (data2[i].Id2 == id && oConfirm) {
        data2.splice(i, 1);
      }
    }
  }
  render2();
}

// 搜索图片的mouseover事件
oSearchBtn2.addEventListener("mouseover", mouseOverFn2);
function mouseOverFn2() {
  oSearchBtn2.style.border = "2px solid #999";
  oSearchBtn2.style.borderRadius = '5px' ;
  oSearchBtn2.style.cursor = "pointer";
}
// 搜索图片的mouseout事件
oSearchBtn2.addEventListener("mouseout", mouseOutFn2);
function mouseOutFn2() {
  oSearchBtn2.style.border = "";
  oSearchBtn2.style.cursor = "";
}
// 搜索图片的点击事件
oSearchBtn2.addEventListener("click", searchBtnFn2);
function searchBtnFn2() {
  page2 = 1;
  render2();
  //   清空输入框的内容
  oSearchInp2.value = "";
}

// 模态框保存按钮
var oAddData2 = document.querySelector(".addSaveBtn2");
oAddData2.addEventListener("click", openAddData2);
function openAddData2() {
  var addId2 = document.querySelector(".addId2").value;
  var addName2 = document.querySelector(".addName2").value;
  var addSex2 = document.querySelector("#addRadio1").checked ? "男" : "女";
  var addEmployee_number2 = document.querySelector(".addEmployee_number2").value;
  var addBefore_department2 = document.querySelector(
    ".addBefore_department2"
  ).value;
  var addAfter_department2 = document.querySelector(
    ".addAfter_department2"
  ).value;
  var addType2 = document.querySelector(".addType2").value;
  var addDate_of_entry2 = document.querySelector(".addDate_of_entry2").value;
  var addDate_of_application2 = document.querySelector(
    ".addDate_of_application2"
  ).value;
  var addApproval_status2 = document.querySelector(".addApproval_status2").value;

  // 将数据插入data中
  data2.push({
    Id2: addId2,
    name2: addName2,
    sex2: addSex2,
    Employee_number2: addEmployee_number2,
    Before_department2: addBefore_department2,
    After_department2: addAfter_department2,
    Type2: addType2,
    Date_of_entry2: addDate_of_entry2,
    Date_of_application2: addDate_of_application2,
    Approval_status2: addApproval_status2,
  });
  // 隐藏关闭模态框
  $("#addModal2").modal("hide");
  // 添加后清空数据
  document.getElementById("#formData2").reset();
  // 重新加载data
  render2();
}

// 模态框修改信息
oTBody2.addEventListener("click", openEdit2);

function openEdit2() {
  // 判断事件来源
  if (event.target.className.includes("add2")) {
    $("#editModal2").modal("show");
    // 确认是哪个id的数据
    var id = event.target.parentNode.parentNode.children[0].innerHTML;
    for (var i = 0; i < data2.length; i++) {
      if (data2[i].Id2 == id) {
        // 编号
        document.querySelector(".editId2").value = data2[i].Id2;
        // 姓名
        document.querySelector(".editName2").value = data2[i].name2;
        // 性别
        if (data2[i].sex2 == "女") {
          document.querySelector("#editRadio22").checked = true;
        }
        // 员工编号
        document.querySelector(".editEmployee_number2").value =
          data2[i].Employee_number2;
        // 原组织部门
        document.querySelector(".editBefore_department2").value =
          data2[i].Before_department2;
        // 调动后组织部门
        document.querySelector(".editAfter_department2").value =
          data2[i].After_department2;
        // 调动类型
        document.querySelector(".editType2").value = data2[i].Type2;
        // 入职日期
        document.querySelector(".editDate_of_entry2").value =
          data2[i].Date_of_entry2;
        // 申请日期
        document.querySelector(".editDate_of_application2").value =
          data2[i].Date_of_application2;
        // 审批状态
        document.querySelector(".editApproval_status2").value =
          data2[i].Approval_status2;
      }
    }
  }
}
//   修改后点击保存
var oEditSavaBtn2 = document.querySelector(".editSaveBtn2");
oEditSavaBtn2.addEventListener("click", editSaveFn2);
function editSaveFn2() {
  var id = document.querySelector(".editId2").value;
  for (var i = 0; i < data2.length; i++) {
    if (data2[i].Id2 == id) {
      // 员工姓名
      data2[i].name2 = document.querySelector(".editName2").value;
      // 员工性别
      data2[i].sex2 = document.querySelector("#editRadio12").checked ? "男" : "女";
      // 员工编号
      data2[i].Employee_number2 = document.querySelector(
        ".editEmployee_number2"
      ).value;
      // 原组织部门
      data2[i].Before_department2 = document.querySelector(
        ".editBefore_department2"
      ).value;
      // 调动后组织部门
      data2[i].After_department2 = document.querySelector(
        ".editAfter_department2"
      ).value;
      // 调动类型
      data2[i].Type2 = document.querySelector(".editType2").value;
      // 入职日期
      data2[i].Date_of_entry2 =
        document.querySelector(".editDate_of_entry2").value;
      // 申请日期
      data2[i].Date_of_application2 = document.querySelector(
        ".editDate_of_application2"
      ).value;
      // 审批状态
      data2[i].Approval_status2 = document.querySelector(
        ".editApproval_status2"
      ).value;
    }
  }
  // 关闭模态框
  $("#editModal2").modal("hide");
  // 重新加载数据
  render2();
}
